@import "../../styles/base";
@import "./base";

.MidYearFestival {
  color: white;
  padding-top: tovw(750);
  padding-bottom: 36vw;
  background: url("./images/banner.png") top center / 100% no-repeat, $bgColor;
  position: relative;

  .time-msg {
    font-size: tovw(24);
    color: $primaryColor;
    text-align: center;
    text-shadow: 0 tovw(2) tovw(4) rgba(0, 0, 189, 0.50);
    font-weight: 600;
    margin-top: -26.4vw;
    padding: 2vw;
  }

  main {
    position: relative;
    overflow: hidden;
    background: $listBgColor;
    margin: -2vw 2vw 0;
    padding-bottom: 2vw;
    min-height: 50vh;
    border: 2px solid $borderColor;
    border-top: none;
    box-shadow: 0 0 tovw(18) 0 rgba(228, 101, 255, 0.85);
    border-radius: 0 0 tovw(20) tovw(20);
    z-index: 2;
  }

  .bg-bottom {
    height: tovw(80);
    position: absolute;
    margin-top: -6vw;
    z-index: 1;
    left: 2vw;
    right: 2vw;
    background: url("./images/bg-bottom.png") center bottom / 100% 100% no-repeat;
  }

  .first-tab {
    padding: 0 2vw;
    margin-bottom: 3.2vw;
    margin-top: 9vw;
    z-index: 1;
    justify-content: space-between;

    li {
      width: tovw(223);
      height: tovw(122);
      font-size: tovw(34);
      color: $primaryColor;
      text-align: center;
      font-weight: 700;
      background: url("images/tab1.png") center center / 100% 100% no-repeat;
      transition: all .5s ease;
      display: flex;
      justify-content: center;
      padding-top: 7.5vw;
      text-shadow: 0 tovw(2) 0 rgba(23, 130, 245, 0.97);

      &.active {
        width: tovw(251);
        margin: 0;
        background-image: url("images/tab1-active.png");
      }

      &::before {
        display: none;
      }
    }
  }

  .second-tab {
    @extend .first-tab;
    z-index: 3;

    font-size: tovw(36);
    padding: 0 2vw;
    margin: -1vw auto auto;

    li {
      flex: 1;
      height: 16.8vw;
      margin: 0;
      background-image: url("./images/tab2-left.png");
      background-position: center 2.4vw;
      background-size: 110% 16.8vw;
      padding: 4vw 0 0;
      color: rgba(255, 255, 255, 0.6);
      align-items: center;
      text-shadow: none;

      &.active {
        color: rgba(255, 255, 255, 1);
        padding-top: 2vw;
        margin: 0;
        background-image: url("images/tab2-left-active.png");
        background-size: 100% 15vw;
        background-position: center bottom;
        opacity: 1;
      }

      &:nth-of-type(1) {
        background-image: url("./images/tab2-left.png");

        &.active {
          background-image: url("images/tab2-left-active.png");
        }
      }

      &:nth-of-type(2) {
        background-image: url("./images/tab2-right.png");

        &.active {
          background-image: url("images/tab2-right-active.png");
        }
      }
    }
  }

  .arr-wrap {
    position: relative;

    .arr {
      width: tovw(42);
      height: tovw(42);
      cursor: pointer;
      background: center / 100% no-repeat;
      position: absolute;
      top: 6.8vw;

      &-pre {
        background-image: url("./images/left-arr.png");
        left: 1vw;
      }

      &-next {
        background-image: url("./images/right-arr.png");
        right: 1vw;
      }

      &[disabled] {
        opacity: 0.66;
      }
    }
  }

  .third-tab-wrap {
    overflow: auto;
    position: relative;
    width: 80vw;
    margin: 2vw auto auto;
  }

  .third-tab {
    margin-bottom: tovw(20);
    z-index: 1;
    width: 120%;
    transition: all .2s ease;
    padding: 0 1vw;
    margin-top: 4vw;

    li {
      flex: 0 0 tovw(108);
      height: tovw(40);
      font-size: tovw(22);
      color: $secondaryColor;
      text-align: center;
      font-weight: 400;
      background-color: $thirdTabBg;
      border-radius: tovw(20);
      transition: all .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: tovw(7);
      padding: 0;
      flex-wrap: nowrap;
      white-space: nowrap;

      &.active {
        color: $primaryColor;
        background-color: $thirdTabBgActive;
      }

      &::before {
        display: none;
      }

      .name {
        margin-bottom: tovw(6);
      }
    }
  }

  .rank-info {
    width: 50vw;
    text-align: center;
    font-size: tovw(32);
    color: #FFF6A5;
    font-weight: 500;
    background: center left / tovw(25) no-repeat;
    margin: 2vw auto;

    &.daily-list-msg {
      width: 70vw;
      font-size: tovw(24);
    }
  }

  .rank-over {
    font-size: tovw(32);
    color: #FFF6A5;
    font-weight: 500;
    text-align: center;
    margin: 1vw auto;
  }

  .task-btn {
    color: #FFF97F;
    text-align: center;
    font-weight: 600;
    font-size: tovw(24);
    letter-spacing: 0;
    width: tovw(120);
    height: tovw(120);
    background: url('./images/task-entry.png') center center / 100% 100% no-repeat;
    position: absolute;
    top: 50vw;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .rule-btn {
    color: #FFF97F;
    text-align: center;
    font-weight: 600;
    font-size: tovw(24);
    letter-spacing: 0;
    width: tovw(132);
    height: tovw(63);
    background: url('./images/rule.png') center center / 100% 100% no-repeat;
    position: absolute;
    top: tovw(60);
    right: -0.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .list-title {
    font-size: tovw(26);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    padding: tovw(20) tovw(40) tovw(20) tovw(20);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(44, 0, 136, 0.7);
    margin-top: 3vw;

    p:nth-of-type(2) {
      width: 50vw;
    }
  }

  .rank-list {
    font-size: tovw(24);
    color: #FFF6A5;
    letter-spacing: 0;
    font-weight: 500;
    margin: tovw(20) auto auto;
    height: 50vmax;
    overflow-y: auto;

    .task-item {
      height: tovw(120);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 tovw(14);
      position: relative;

      .text {
        font-size: tovw(24);
        color: #FFF6A5;
        font-weight: 500;
        margin: 0 0 tovw(4) tovw(36);
      }

      .task-box {
        height: tovw(100);
        width: tovw(100);
        background: center left / tovw(100) no-repeat;
        position: absolute;
        left: tovw(14);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }

      .task-progress {
        padding-left: tovw(80);
      }

      .receive-btn {
        color: #571E04;
        font-size: tovw(22);
        text-align: center;
        font-weight: 700;
        width: tovw(140);
        height: tovw(61);
        background: center left / 100% no-repeat;

        &[disabled] {
          color: #777777;
        }
      }
    }

    .item {
      margin-top: tovw(6);
      height: tovw(120);
      position: relative;

      .normal-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        width: 100%;

        .rank-num {
          width: 16vw;
          height: tovw(72);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: tovw(28);
          color: $primaryColor;
          letter-spacing: 0;
          text-align: center;
          font-weight: 500;
        }

        .avatar {
          width: tovw(90);
          height: tovw(90);
          border: 2px solid $secondaryColor;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          align-items: center;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .user-info {
          flex: 1;
          margin-left: tovw(20);
          display: flex;
          align-items: center;

          .name {
            color: $primaryColor;
            font-size: tovw(22);
            letter-spacing: 0;
            font-weight: 400;
            width: 30vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .top-info {
            display: flex;
            flex-direction: column;
            margin-left: tovw(20);

            .top-wrap {
              display: flex;
              margin-top: tovw(10);

              .top {
                font-size: tovw(22);
                color: $secondaryColor;
                font-weight: 400;
                margin-right: tovw(10);
              }

              .avatar {
                width: tovw(38);
                height: tovw(38);
                border-color: $primaryColor;
              }
            }
          }
        }

        .num {
          color: $secondaryColor;
          text-align: center;
          font-weight: 400;
          padding-left: tovw(20);
          background: right center / tovw(34) no-repeat;
          font-size: tovw(24);
          display: flex;
          align-items: center;
          padding-right: tovw(34);
          height: 100%;
        }
      }

      &.item-rank:nth-of-type(1) .normal-item {
        background: url("./images/top1.png") left center / tovw(90) tovw(54) no-repeat;
      }

      &.item-rank:nth-of-type(2) .normal-item {
        background: url("./images/top2.png") left center / tovw(90) tovw(54) no-repeat;
      }

      &.item-rank:nth-of-type(3) .normal-item {
        background: url("./images/top3.png") left center / tovw(90) tovw(54) no-repeat;
      }

      &.item-self {
        display: flex;
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: -1vw;
        height: tovw(160);
        background-image: linear-gradient(130deg, #18D1FF 0%, #1D88FF 97%);
        border: 2px solid rgba(0, 255, 248, 1);
        border-radius: tovw(20) tovw(20) 0 0;
      }
    }

    .more {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: tovw(26);
      color: #FFFFFF;
      font-weight: 700;
      padding-top: tovw(30);

      img {
        width: tovw(38);
        height: tovw(38);
        margin-right: tovw(12);
        animation: rotateMore 1.5s linear infinite;
      }

      span {
        color: rgba(255, 255, 255, 0.67);
      }
    }
  }

  .empty {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 10vw;

    img {
      height: tovw(250);
      object-fit: contain;
    }

    p {
      width: tovw(450);
      font-size: tovw(32);
      color: #FFF6A5;
      text-align: center;
      font-weight: 500;
      opacity: 0.5;
      margin: 0
    }
  }

  .award-modal {
    .modal-body {
      width: tovw(600);
      height: tovw(750);
      background-color: #421B0F;
      border: tovw(7) solid rgba(255, 226, 173, 1);
      border-radius: tovw(19);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: tovw(60) tovw(30) tovw(54);
      overflow: hidden;

      .title {
        line-height: tovw(53);
        font-size: tovw(44.4);
        color: #F9D08C;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }

      .award-images {
        display: flex;
        justify-content: center;
        text-align: center;
        width: 100%;
        overflow-x: auto;

        li {
          flex: 0 0 tovw(240);

          .gift-img {
            background: #36150B;
            border-radius: tovw(10);
            height: tovw(260);
            padding: tovw(24) tovw(8);

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          .gift-name {
            width: tovw(250);
            height: tovw(41);
            font-size: tovw(28.8);
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: tovw(20);
          }
        }
      }

      button {
        font-size: tovw(44);
        color: #571E04;
        text-align: center;
        font-weight: 700;
        width: tovw(280);
        height: tovw(122);
        background: center center / 100% no-repeat;
      }
    }
  }


  &.first-tab-2 {
    main {
      margin-top: tovw(76);
      clip-path: polygon(4vw 0, 92vw 0, 100% 4vw, 100% 100%, 0 100%, 0 4vw);
      border-top: 2px solid $borderColor;
      padding-top: 10vw;

      &::before {
        content: "";
        display: block;
        width: 10vw;
        height: 8vw;
        position: absolute;
        top: -3.75vw;
        left: -7.25vw;
        background-color: $borderColor;
        transform: rotate(-45deg);
      }

      &::after {
        content: "";
        display: block;
        width: 10vw;
        height: 8vw;
        position: absolute;
        top: -5.1vw;
        right: -7.25vw;
        background-color: $borderColor;
        transform: rotate(-45deg);
      }

      .tab3-title {
        width: tovw(336);
        height: tovw(82);
        margin: -10.2vw auto auto;
        background: url("./images/agency-title-bg.png") top center / 100% no-repeat;
        font-size: tovw(36);
        color: $primaryColor;
        text-align: center;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .rank-list {
        .item {
          .normal-item {
            .user-info {
              .name {
                font-size: tovw(24);
              }
            }

            .host {
              display: flex;
              align-items: center;
              padding-right: tovw(30);

              .avatar {
                width: tovw(70);
                height: tovw(70);
                margin-left: tovw(-22);
              }

              &::after {
                content: "· · ·";
                display: flex;
                justify-content: center;
                align-items: center;
                width: tovw(49);
                height: tovw(49);
                border-radius: 50%;
                background: rgba(0,0,0,0.30);
                margin-left: tovw(12);
                font-size: tovw(22);
                font-weight: 700;
                color: $primaryColor;
              }
            }
          }
        }
      }
    }
  }
}


.heartBeat {
  animation: heartBeat 2s ease-in-out infinite;
}

.shine {
  overflow: hidden;

  &:after {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shineAni 3s ease-in-out infinite;
  }
}

@keyframes shineAni {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.1);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(1);
  }
}

@keyframes rotateMore {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
